<template>
  <div class="box">
    <div class="login_box">
      <div class="oneKey_close" @click="closeLogin">
        <van-icon name="cross" />
      </div>
      <div class="login_box_title">
        <p>登录&注册</p>
        <p>您好，欢迎使用爱美</p>
      </div>
      <div class="login_btn">
        <van-form @submit="onSubmit">
          <van-field
            class="login_tel"
            v-model="username"
            name="username"
            placeholder="请填写您的手机号"
            :rules="[{ required: true, message: '请输入正确内容' }]"
          />
          <van-field
            class="login_tel login_verificationCode"
            v-model="authCode"
            name="authCode"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          />
          <span class="code_btn" @click="sendCode">发送验证码</span>
          <van-button class="login_submit" round block type="info" native-type="submit">
            立即登录
          </van-button>
        </van-form>
      </div>
      <p class="login_hint">未注册手机号验证后自动创建为爱美账号</p>
      <p class="login_way">———&nbsp;&nbsp; 社交账号直接登录 &nbsp;&nbsp;———</p>
      <div class="login_mode">
        <img src="@/assets/images/weixin.png" alt="" @click="goWeixin">
        <img src="@/assets/images/qq.png" alt="" @click="goQq">
      </div>
      <p class="login_protocol">
        登录/注册代表您已同意
        <span @click="goUserAgreement">《爱美用户使用协议》</span>
      </p>
    </div>
  </div>
</template>

<script>
import { getSendCode, getLogin } from '../../api'
import Vue from 'vue'
import { Form, Field, Button, Toast } from 'vant'
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      authCode: '',
      userObj: {}
    }
  },
  methods: {
    onSubmit (values) {
      getLogin({
        username: this.username,
        authCode: this.authCode
      }).then(res => {
        if (res.data.code === '400') {
          Toast('验证码错误，请重新输入')
        } else {
          this.userObj = res.data.data[0]
          localStorage.setItem('userTel_AM', this.userObj.username)
          localStorage.setItem('token_AM', this.userObj.token)
          localStorage.setItem('isLogin_AM', 1)
          localStorage.setItem('loginState_AM', 'ok')
          // this.$router.replace('/user')
          this.$router.go(-1)
        }
      })
    },
    goWeixin () {
      // Toast('该功能尚未开通')
    },
    goQq () {
      // Toast('该功能尚未开通')
    },
    sendCode () {
      if (this.username === '') {
        Toast('请填写您的手机号')
      } else if (!(/^1[3456789]\d{9}$/.test(this.username))) {
        Toast('手机号输入错误，请重新输入')
      } else {
        getSendCode({ phoneNumber: this.username }).then(res => {
          Toast('验证码已发送,请在5分钟内填写')
        })
      }
    },
    goUserAgreement () {
      this.$router.push('/userAgreement')
    },
    closeLogin () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.login_box {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  padding: 0 0.3rem;
  .oneKey_close {
    width: 100%;
    height: 0.24rem;
    margin-top: 0.35rem;
    margin-bottom: 0.18rem;
    .van-icon-cross {
      font-size: 0.24rem;
      float: right;
    }
  }
  .login_box_title {
    width: 100%;
    height: 0.44rem;
    margin-top: 0.3rem;
    margin-bottom: 0.86rem;
    p:nth-of-type(1) {
      width: 100%;
      height: 0.18rem;
      line-height: 0.18rem;
      color: #181818;
      font-size: 0.18rem;
      margin-bottom: 0.1rem;
    }
    p:nth-of-type(2) {
      width: 100%;
      height: 0.16rem;
      line-height: 0.16rem;
      color: #626262;
      font-size: 0.14rem;
    }
  }
  .login_btn {
    position: relative;
    .login_tel {
      width: 100%;
      height: 0.46rem;
      padding: 0;
      background: rgba(249,249,249,1);
      box-shadow: 0rem 0.09rem 0.16rem 0rem rgba(210,146,172,0.21);
      border-radius: 0.19rem;
      margin-bottom: 0.3rem;
    }
    .code_btn {
      position: absolute;
      top: 0.76rem;
      color: #999999;
      font-size: 0.14rem;
      line-height: 0.45rem;
      right: 0.1rem;
      margin-right: 0.2rem;
    }
    .login_submit {
      display: block;
      color: #FFFFFF;
      font-size: 0.14rem;
      text-align: center;
      line-height: 0.45rem;
      width: 100%;
      height: 0.45rem;
      margin-top: 0.04rem;
      background: linear-gradient(0deg,rgba(250,100,140,1) 42%,rgba(255,131,238,1) 100%);
      border-radius: 0.22rem;
      border: none;
    }
  }
  .login_hint {
    width: 100%;
    height: 0.14rem;
    margin-top: 0.15rem;
    font-size: 0.14rem;
    color: #F53076;
    text-align: center;
    line-height: 0.14rem;
  }
  .login_way {
    width: 100%;
    height: 0.12rem;
    line-height: 0.12rem;
    color: #999999;
    font-size: 0.12rem;
    text-align: center;
    margin-top: 0.32rem;
  }
  .login_mode {
    width: 1rem;
    height: 0.36rem;
    margin: 0.17rem auto;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.36rem;
      height: 0.36rem;
    }
  }
  .login_protocol {
    width: 100%;
    height: 0.12rem;
    margin-top: 0.41rem;
    color: #999999;
    font-size: 0.12rem;
    text-align: center;
    span {
      color: #236FEE;
    }
  }
}
/deep/ .van-cell {
  border-bottom: none!important;
}
/deep/ .van-field__control {
  line-height: 0.46rem;
  padding: 0 0.15rem;
  color: #999999;
  font-size: 0.14rem;
}
</style>
